/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view class="nav">
			<navigator @click="changeTab" class="nav-item" :class="[params.type==1?'red':'']" data-id="1" role="navigation">默认</navigator>
			<navigator @click="changeTab" class="nav-item" :class="[params.type==2?'red':'']" data-id="2" role="navigation"> 即将过期 </navigator>
			<navigator @click="changeTab"class="nav-item" :class="[params.type==3?'red':'']" data-id="3"role="navigation"> 面值最大 </navigator>
		</view>
		<block v-for="(item,index) in coupon" :key='index'>
			<view class="coupon_list" data-index="0">
				<image class="coupon_bg" :src="imgUrl+'index/coupon_bg.png'" role="img"></image>
				<image class="coupon_already" :src="imgUrl+'index/already.png'" role="img" v-if="item.receive"></image>
				<view class="main_box">
					<image class="coupon_mode" v-if="item.image" :src="imageError?imgUrl+'index/coupon_mode.jpg':hostUrl+item.image" @error="onImageError()"  role="img"></image>
					<image class="coupon_mode" v-if="!item.image" :src="imgUrl+'index/coupon_mode.jpg'"></image>
					<view class="right_main">
						<view class="topbox">{{item.limit_store}}</view>
						<view class="footbox">
							<view class="leftbox">
								<view class="price">
									￥
									<text class="note">
										{{item.money}}
									</text>
									.00
								</view>
								<view class="full"> 满{{item.condition}}.00可用 </view>
							</view>
							<view class="btn_1" :class="[item.receive==1?'btn_2':'']" @tap="toTeceive" :data-id="item.id" :data-index="index">{{item.receive==1?'已领取':'立即领取'}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import {getCoupons,postCoupon,getUserCoupon} from "@/api/api.js";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				coupon:[],//劵list
				total:"",//条数
				currentPage: 1,
				imageError:false,//图片请求错误
				size:15,
				params:{
					"cat_id":"",//商品3级id
					"type":1,//领劵接口type参数默认1
					"p":1,
				}
			};
		},
		computed: mapState(['hasLogin']),
		onLoad(options){
			// console.log(options)
			
			if(options.cart_id){
				this.params.cat_id=options.cart_id;
			}
			this.islogin()
			// // this._getCoupons(this.cart_id,this.typeId)
			// this._getCoupons(this.params)
			// // this._getCoupons("",this.typeId)
			// this.getCouponData(this.params)
		
		},
		onShow(){
			
		},
		methods:{
			_getCoupons(params){//优惠劵信息 需要商品3级id
				getCoupons(params).then(res=>{
					console.log(res)
					Array.from(res.records,item=>item.receive=0);
					// this.coupon=this.coupon.concat(res.records)
					this.total=res.total;
					return res.records
				}).then(data=>{
					console.log(data)
					if(this.hasLogin){
						getUserCoupon().then(res=>{
							if(res.length>0){
								data.map(item=>{
									res.map(v=>{
										if(v.cid==item.id){
											item.receive=1;
										}
									})
								})
							}
							this.coupon=this.coupon.concat(data)
						})
					}else{
						 this.coupon=this.coupon.concat(data)	
					}
				})
			},
			
			islogin(){
				/*重新获取登录状态*/
				this._getCoupons(this.params)
			},
			/*领取优惠劵*/
			_postCoupon(params,index){
				postCoupon(params,index).then(res=>{
					if(res.status!=1){
						return common.model(res.msg)
					}
					if(res.status==1){
						common.toast("none","领取成功",2000)
						// this.getCouponData(this.params)
						this.coupon[index].receive==1; 
					}
					
				})
			},
			//领取
			toTeceive(e){
			
				if(!this.hasLogin){
					common.toast("none","请先登录",2000)
				}else{
					let id =e.currentTarget.dataset.id
					let index=e.currentTarget.dataset.index
					// console.log(e)
					let params={
						cid:id,//优惠券id
					}
					if(this.coupon[index].receive==1){
						common.toast("none","已经领了",3000)
					}else{
						this._postCoupon(params,index)
					}
					
				}
			},
			/*切换*/
			changeTab(e){
					this.coupon.length=0;
					this.params.p=1;
					this.params.type=e.currentTarget.dataset.id;
					this._getCoupons(this.params)
				
			},
			onReachBottom(){//下拉加载数据
				
				if(this.coupon.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.p++;
				this.getCouponData(this.params)
				
				
			},
			/*图片404使用默认图片*/ 
			onImageError(){
				this.imageError=true;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		padding-top: 90rpx;
	}
	
	.container {
		color: #333;
		background: #f5f5f5;
	}

	.red {
		font-weight: bold;
		color: #ff3b3b;
	}

	.nav-item {
		float: left;
		width: 33.33%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.nav-item .ico-dg {
		width: 32rpx;
		height: 18rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.nav-item .ico-dg>.wh100 {
		width: 15rpx;
		height: 9rpx;
	}

	.nav {
		background: #fff;
		position: fixed;
		top: 0rpx;
		width: 100%;
		z-index: 10;
		color: #333;
	}
//#ifdef H5
page{
	padding-top: 90rpx;
	
}
.nav{
	top: 88rpx;
}
//#endif
	.coupon-box {
		font-size: 26rpx;
		padding: 0 30rpx;
		margin: 15rpx 0;
		background: #fff;
	}

	.conpon-left {
		float: left;
		padding: 30rpx 0 30rpx 10rpx;
	}

	.conpon-img {
		box-sizing: border-box;
		float: left;
		height: 150rpx;
		width: 150rpx;
		border: 1rpx solid #f3f3f3;
	}

	.coupon-detail {
		float: left;
		padding: 10rpx 10rpx;
	}

	.coupon-title {
		width: 350rpx;
		height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.coupon-range {
		width: 350rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999;
	}

	.coupon-info {
		color: #4cb6b8;
		margin-top: 10rpx;
	}

	.discounts {
		font-size: 40rpx;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
	}

	.conpon-right {
		position: relative;
		float: right;
		width: 160rpx;
		height: 160rpx;
		padding-top: 50rpx;
		background-color: #74d2d4;
		text-align: center;
		color: #f6f6f6;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.conpon-right .hidden {
		display: none;
	}

	.conpon-right .have {
		position: absolute;
		top: -10rpx;
		left: -50rpx;
		display: block;
		border: 6rpx solid #f3f3f3;
		width: 124rpx;
		height: 124rpx;
		border-radius: 50%;
		padding: 8rpx;
		font-size: 35rpx;
	}

	.conpon-right .have text {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border: 1px solid #f3f3f3;
		border-radius: 50%;
		line-height: 120rpx;
		transform: rotate(-30deg);
	}

	.conpon-right .go-use {
		display: none;
		position: absolute;
		bottom: 15rpx;
		left: 10rpx;
		width: 130rpx;
		background: #F9F124;
		color: #C65217;
		border-radius: 100rpx;
		padding: 4rpx 0;
		border: 4rpx solid #909693;
		font-size: 24rpx;
		font-weight: 600;
	}

	.receive {
		background: #E23435;
	}

	.receive .circle {
		display: none;
	}

	.receive view {
		display: none;
	}

	.receive .go-use {
		display: block;
	}

	.circle {
		position: absolute;
		top: 15rpx;
		left: 4rpx;
		width: 160rpx;
		height: 120rpx;
		text-align: left;
	}

	.get-btn {
		background: white;
		color: #74d2d4;
		border-radius: 26rpx;
		width: fit-content;
		padding: 0 8rpx;
		border: 4rpx solid #48b3b5;
		margin: 40rpx auto 0;
	}

	/*以下是新增样式*/
	.coupon_list {
		margin: 20rpx auto 0;
		width: 710rpx;
		height: 240rpx;
		position: relative;
	}

	.coupon_list:first-child {
		margin-top: 110rpx;
	}

	.coupon_list .coupon_bg {
		width: 710rpx;
		height: 240rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 0;
	}

	.coupon_list .coupon_already {
		position: absolute;
		width: 140rpx;
		height: 140rpx;
		right: 30rpx;
		top: 10rpx;
		z-index: 0;
	}

	.coupon_list .coupon_mode {
		width: 160rpx;
		height: 160rpx;
		margin-top: 40rpx;
		margin-left: 40rpx;
		/* float: left; */
	}

	.main_box {
		width: 100%;
		height: 100%;
		z-index: 10;
		position: relative;
	}

	.coupon_list .right_main {
		width: 437rpx;
		height: 100%;
		float: right;
		padding-right: 45rpx;
		box-sizing: border-box;
	}

	.coupon_list .right_main .topbox {
		height: 110rpx;
		width: 100%;
		box-sizing: border-box;
		line-height: 110rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		color: #333333;
	}

	.coupon_list .right_main .footbox {
		height: 130rpx;
		width: 100%;
	}

	.coupon_list .right_main .footbox .leftbox {
		width: 230rpx;
		height: 100%;
		float: left;
		color: #FF3B3B;
	}

	.coupon_list .right_main .footbox .price {
		width: 100%;
		height: 60rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
		line-height: 60rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: bold;
	}

	.coupon_list .right_main .footbox .price .note {
		font-size: 36rpx;
	}

	.coupon_list .right_main .footbox .full {
		width: 100%;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.coupon_list .right_main .footbox .btn_1 {
		width: 140rpx;
		height: 48rpx;
		float: right;
		background: linear-gradient(90deg, rgba(255, 59, 59, 1) 0%, rgba(255, 115, 61, 1) 100%);
		/* box-shadow:0rpx 6rpx 10rpx 1rpx rgba(255,59,59,0.3); */
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		line-height: 48rpx;
		margin-top: 40rpx;
	}

	.coupon_list .right_main .footbox .btn_2 {
		width: 140rpx;
		height: 48rpx;
		float: right;
		background: #b3b3b3;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		line-height: 48rpx;
		margin-top: 40rpx;
	}
</style>
